<template>
  <div class="method-node-box" :style="{'background-color': bgColor, 'border-color':color, 'color': color}">
    <i class="ports left-ports" :style="{'border-color':color}"></i>
    <div class="method-node-top">
      <div class="method-node-title">分析策略</div>
      <el-checkbox v-model="choose" @change="handleChange"></el-checkbox>
    </div>
    <div class="method-node-content">上升值分析方法</div>
  </div>
</template>

<script>
export default {
  name: 'MethodNode',
  inject: ["getGraph", "getNode"],
  data() {
		return {
      data: {},
      choose: false,
      bgColor: '#fff2e1',
      color: '#fd9100',
		}
	},
  mounted() {
    console.log(this.getGraph(), this.getNode())
    this.data = this.getNode().data
    console.log(this.data)
  },
  methods: {
    handleChange() {
      this.$emit('change', this.getNode(), this.choose)
    }
  }
}
</script>

<style lang="scss" scoped>
.method-node-box {
  font-size: 18px;
	border-radius: 10px;
	border: solid 2px;
  padding: 4px;
  height: 60px;
  width: 140px;
  position: relative;
  .ports {
    position: absolute;
    display: block;
    border-radius: 50%;
    width: 13px;
    height: 13px;
    top: 50%;
    transform: translateY(-50%);
    background-color: #ffffff;
	  border: solid 2px;
  }
  .left-ports {
    left: -7px;
  }
  .method-node-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .method-node-content {
    font-size: 16px;
  }
}
</style>